<script setup>
import {ref} from 'vue'
import {get, post} from '../util/request.js'
import {useStore} from "../pinia/index.js";
import {useRouter} from "vue-router";
import { showToast } from 'vant';

const router = useRouter();
const store = useStore();
const user = ref({});
const type = ref(true);
const lbname = ref("账号");

const login = () => {
  let url = "";
  if (!type.value) {
    // 手机号 + 验证码登录
    url = "user/logincode";
    post(url, user.value).then(r => {
      if (r.code == 0) {
        store.setToken(r.data);
        router.push("/home");
      } else {
        showToast(r.data);
      }
    });
  } else {
    // 账户 + 密码登录
    url = "user/loginpass";
    post(url, user.value).then(r => {
      if (r.code == 0) {
        store.setToken(r.data);
        router.push("/home");
      } else {
        showToast(r.data);
      }
    });
  }
}

const changeTab = (e) => {
  user.value = {};
  if (e.name == "0") {
    type.value = true;
    lbname.value = "账号";
  } else {
    lbname.value = "手机号";
    type.value = false;
  }
}

const sendCode = () => {
  get("sms/logincode", {phone: user.value.name}).then(r => {
    if (r.code == 0) {
      showToast('验证码已发送到你的手机，请查收！');
    } else {
      showToast(r.data);
    }
  });
}
</script>

<template>
  <div class="form-container">
    <van-nav-bar title="欢迎登录酒店系统" />

    <div class="image-container">
      <van-image
          round
          width="10rem"
          height="10rem"
          src="https://img0.baidu.com/it/u=2733395436,575466529&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
      />
    </div>

    <van-tabs @click-tab="changeTab" class="tabs">
      <van-tab>
        <template #title>
          <van-icon name="browsing-history" /> 密码登录
        </template>
      </van-tab>
      <van-tab>
        <template #title>
          <van-icon name="comment-circle" /> 验证码登录
        </template>
      </van-tab>
    </van-tabs>

    <van-form @submit="login">
      <van-cell-group inset>
        <van-field
            v-model="user.name"
            :label="lbname"
            placeholder="请输入账号或手机号"
            :rules="[{ required: true, message: '请输入账号或手机号' }]"
        />

        <!-- 输入密码 -->
        <van-field
            v-if="type"
            v-model="user.pass"
            :rules="[{ required: true, message: '请输入密码' }]"
            type="password"
            placeholder="请输入密码"
            label="密码"
        />
        <van-field
            v-else
            v-model="user.pass"
            :rules="[{ required: true, message: '请输入短信验证码' }]"
            clearable
            label="短信验证码"
            placeholder="请输入短信验证码"
        >
          <template #button>
            <van-button size="small" type="primary" @click="sendCode">发送验证码</van-button>
          </template>
        </van-field>
      </van-cell-group>

      <div class="button-container">
        <van-button type="success" round block native-type="submit">登录账号</van-button>
      </div>

      <van-grid clickable :column-num="2" class="grid">
        <van-grid-item text="忘记密码" to="/findpwd" />
        <van-grid-item text="没有账号去注册" to="/register" />
      </van-grid>
    </van-form>
  </div>
</template>

<style scoped>
.form-container {
  padding: 20px;
  min-height: 100vh;
  //display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url('/hotelroom.gif');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  backdrop-filter: blur(8px);
}

.image-container {
  text-align: center;
  margin-bottom: 20px;
}

.tabs {
  width: 100%;
  margin: 20px 0;
}

.button-container {
  margin: 15px 10% 20px;
  width: 80%;
}

.grid {
  margin-bottom: 20px;
}

.van-field {
  margin-bottom: 15px;
}

.van-button {
  transition: all 0.3s ease;
}

.van-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
</style>
